<template>
  <a-modal
  class="invoice-info-modal"
  :visible="visible"
  :title="title"
  :maskClosable="false"
  :destroyOnClose="true"
  :keyboard="false"
  :closable="false"
  :confirmLoading="confirmLoading"
  width="50%"
  @cancel="closeModal(false)"
  @ok="handleSubmit">
    <a-form-model
      class="invoice-info-form"
      ref="ruleForm"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 19 }">
      <a-form-model-item label="抬头类型" prop="headType">
        <a-radio-group
          v-model="formData.headType"
          :disabled="handle == 'view'">
          <a-radio :value="1">企业</a-radio>
          <a-radio :value="2">个人</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="发票抬头" prop="buyerName">
        <a-input
          style="width: 300px"
          v-model="formData.buyerName"
          :disabled="handle == 'view'"
          placeholder="请输入发票抬头" />
      </a-form-model-item>
      <a-form-model-item v-if="formData.headType == 1" label="公司税号" prop="buyerTaxNum">
        <a-input
          style="width: 300px"
          v-model="formData.buyerTaxNum"
          :disabled="handle == 'view'"
          placeholder="请输入公司税号" />
      </a-form-model-item>
      <a-form-model-item label="发票内容" prop="content">
        <a-radio-group
          v-model="formData.content"
          :disabled="handle == 'view'">
          <a-radio :value="1">商品类型</a-radio>
          <a-radio :value="2">商品详情</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="收票人邮箱" prop="email">
        <a-input
          style="width: 300px"
          v-model="formData.email"
          :disabled="handle == 'view'"
          placeholder="请输入收票人邮箱" />
      </a-form-model-item>
    </a-form-model>
    <template slot="footer">
      <a-button key="back" @click="closeModal(false)"> {{ handle == 'view' ? '返回' : '取消' }} </a-button>
      <a-button :loading="confirmLoading" v-if="handle != 'view'" key="submit" type="primary" @click="handleSubmit"> 提交 </a-button>
    </template>
  </a-modal>
</template>

<script>
import deepCopy from '@/utils/deepCopy'

const formData={
  id: undefined, // 发票id
  headType: 1, // 抬头类型
  buyerName: undefined, // 发票抬头
  buyerTaxNum: undefined, // 公司税号
  content: 1, // 发票内容
  email: undefined, // 收票人邮箱
}

export default {
  name: 'invoiceInfoForm',
  props: {
    handle: { // 操作类型
      type: String,
      default: 'edit'
    },
    record: { // 选中行数据
      type: Object,
      default () {
        return {}
      }
    },
    visible: { // 是否显示弹窗
      type: Boolean,
        default: false
    },
  },
  data() {
    return {
      confirmLoading: false, // 提交等待
      formData,
      disabled: false, // 表单禁用状态
      rules:{ // 表单验证规则
        buyerName: [
          { required: true, message: '请输入发票抬头', trigger: ['change', 'blur'] },
        ],
        buyerTaxNum: [
          { required: true, message: '请输入公司税号', trigger: ['change', 'blur'] }
        ],
      }
    };
  },
  computed: {
    title() { // 弹窗标题
      let res = ''
      switch (this.handle) {
        case 'add':
          res = '添加'
          break;
        case 'edit':
          res = '编辑'
          break;
        case 'view':
          res = '查看'
          break;
        default:
          res = '操作'
          break;
        }
      return res
    }
  },
  watch: {
    // 监听弹窗显示，回显数据
    visible(value) {
      if (value && this.record.id) {
        this.$nextTick(()=> {
          this.formData = deepCopy(this.record)
        })
      } else {
        this.resetData()
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 重置
    resetData(){
      this.formData=deepCopy(formData);
    },
    // 提交
    handleSubmit() {
      let _this = this
      this.confirmLoading = true;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$post(
            '/order/invoice/update',
            this.formData,
            { baseURL: `${location.origin}/goldenhome/invoice/admin` }
          ).then(res => {
            if (res && res.returnCode === 1000) {
              this.confirmLoading = false;
              _this.closeModal(true);
            } else {
              return;
            }
          }).catch(err => {
            this.confirmLoading = false;
          })
        } else {
          this.confirmLoading = false;
          this.$message.error('表单验证失败！');
          return false;
        }
      });
    },
    // 取消
    closeModal(bool) {
      this.$emit('cancel', bool)
    }
  }
};
</script>

<style lang="less" scoped></style>
